<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50">
    <div class="container mx-auto px-4 py-8">
      <!-- 页面标题 -->
      <div class="mb-8 animate-fade-in">
        <div class="flex items-center space-x-4 mb-4">
          <div class="p-3 bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl shadow-lg">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
            </svg>
          </div>
          <div>
            <h1 class="text-4xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">系统设置</h1>
            <p class="text-gray-600 mt-1">管理系统配置和参数</p>
          </div>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- 左侧：设置菜单 -->
        <div class="lg:col-span-1">
          <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg animate-slide-up">
            <nav class="space-y-2 p-6">
              <button
                v-for="tab in tabs"
                :key="tab.id"
                :class="[
                  'w-full text-left px-4 py-3 rounded-xl text-sm font-medium transition-all duration-200 flex items-center space-x-3',
                  activeTab === tab.id
                    ? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg'
                    : 'text-gray-600 hover:bg-white/50 hover:text-gray-900 hover:scale-[1.02]'
                ]"
                @click="activeTab = tab.id"
              >
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path v-if="tab.id === 'basic'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
                  <path v-if="tab.id === 'user'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
                  <path v-if="tab.id === 'contest'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
                  <path v-if="tab.id === 'system'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
                  <path v-if="tab.id === 'security'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                </svg>
                <span>{{ tab.name }}</span>
              </button>
            </nav>
          </div>
        </div>

        <!-- 右侧：设置内容 -->
        <div class="lg:col-span-2">
          <!-- 基本设置 -->
          <div v-if="activeTab === 'basic'" class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg p-8 animate-slide-up animation-delay-200">
            <div class="flex items-center space-x-3 mb-8">
              <div class="p-2 bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl">
                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
                </svg>
              </div>
              <h2 class="text-2xl font-bold text-gray-900">基本设置</h2>
            </div>
            
            <form class="space-y-6" @submit.prevent="saveBasicSettings">
              <div>
                <label class="block text-sm font-semibold text-gray-700 mb-3">网站名称</label>
                <input
                  v-model="settings.siteName"
                  type="text"
                  class="w-full px-4 py-3 bg-white/70 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                />
              </div>

              <div>
                <label class="block text-sm font-semibold text-gray-700 mb-3">网站描述</label>
                <textarea
                  v-model="settings.siteDescription"
                  rows="3"
                  class="w-full px-4 py-3 bg-white/70 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                ></textarea>
              </div>

              <div>
                <label class="block text-sm font-semibold text-gray-700 mb-3">网站关键词</label>
                <input
                  v-model="settings.siteKeywords"
                  type="text"
                  class="w-full px-4 py-3 bg-white/70 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 placeholder-gray-400"
                  placeholder="算法,编程,竞赛,学习"
                />
              </div>

              <div>
                <label class="block text-sm font-semibold text-gray-700 mb-3">管理员邮箱</label>
                <input
                  v-model="settings.adminEmail"
                  type="email"
                  class="w-full px-4 py-3 bg-white/70 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                />
              </div>

              <div class="flex justify-end pt-4">
                <button
                  type="submit"
                  class="px-8 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-purple-700 transition-all duration-200 hover:scale-105 shadow-lg"
                >
                  <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                  </svg>
                  保存设置
                </button>
              </div>
            </form>
          </div>

          <!-- 用户设置 -->
          <div v-if="activeTab === 'user'" class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg p-8 animate-slide-up animation-delay-200">
            <div class="flex items-center space-x-3 mb-8">
              <div class="p-2 bg-gradient-to-r from-green-500 to-green-600 rounded-xl">
                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
                </svg>
              </div>
              <h2 class="text-2xl font-bold text-gray-900">用户设置</h2>
            </div>
            
            <form class="space-y-6" @submit.prevent="saveUserSettings">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">允许用户注册</label>
                <div class="flex items-center">
                <input
                  v-model="settings.allowRegistration"
                  type="checkbox"
                  class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded-xl"
                />
                  <label class="ml-2 text-sm text-gray-700">启用用户注册功能</label>
                </div>
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">需要邮箱验证</label>
                <div class="flex items-center">
                  <input
                    v-model="settings.requireEmailVerification"
                    type="checkbox"
                    class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                  />
                  <label class="ml-2 text-sm text-gray-700">注册时需要验证邮箱</label>
                </div>
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">默认用户角色</label>
                <select
                  v-model="settings.defaultUserRole"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                  <option value="user">普通用户</option>
                  <option value="teacher">教师</option>
                </select>
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">用户头像大小限制 (MB)</label>
                <input
                  v-model="settings.avatarSizeLimit"
                  type="number"
                  min="1"
                  max="10"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

              <div class="flex justify-end">
                <button
                  type="submit"
                  class="px-8 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-purple-700 transition-all duration-200 hover:scale-105 shadow-lg"
                >
                  <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                  </svg>
                  保存设置
                </button>
              </div>
            </form>
          </div>

          <!-- 竞赛设置 -->
          <div v-if="activeTab === 'contest'" class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg p-8 animate-slide-up animation-delay-200">
            <div class="flex items-center space-x-3 mb-8">
              <div class="p-2 bg-gradient-to-r from-purple-500 to-purple-600 rounded-xl">
                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
                </svg>
              </div>
              <h2 class="text-2xl font-bold text-gray-900">竞赛设置</h2>
            </div>
            
            <form class="space-y-6" @submit.prevent="saveContestSettings">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">默认竞赛时长 (分钟)</label>
                <input
                  v-model="settings.defaultContestDuration"
                  type="number"
                  min="30"
                  max="300"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">允许竞赛报名</label>
                <div class="flex items-center">
                  <input
                    v-model="settings.allowContestRegistration"
                    type="checkbox"
                    class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                  />
                  <label class="ml-2 text-sm text-gray-700">允许用户报名参加竞赛</label>
                </div>
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">竞赛开始前可报名时间 (小时)</label>
                <input
                  v-model="settings.contestRegistrationDeadline"
                  type="number"
                  min="1"
                  max="168"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">自动开始竞赛</label>
                <div class="flex items-center">
                  <input
                    v-model="settings.autoStartContest"
                    type="checkbox"
                    class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                  />
                  <label class="ml-2 text-sm text-gray-700">到达开始时间时自动开始竞赛</label>
                </div>
              </div>

              <div class="flex justify-end">
                <button
                  type="submit"
                  class="px-8 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-purple-700 transition-all duration-200 hover:scale-105 shadow-lg"
                >
                  <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                  </svg>
                  保存设置
                </button>
              </div>
            </form>
          </div>

          <!-- 系统设置 -->
          <div v-if="activeTab === 'system'" class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg p-8 animate-slide-up animation-delay-200">
            <div class="flex items-center space-x-3 mb-8">
              <div class="p-2 bg-gradient-to-r from-orange-500 to-orange-600 rounded-xl">
                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
                </svg>
              </div>
              <h2 class="text-2xl font-bold text-gray-900">系统设置</h2>
            </div>
            
            <form class="space-y-6" @submit.prevent="saveSystemSettings">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">维护模式</label>
                <div class="flex items-center">
                  <input
                    v-model="settings.maintenanceMode"
                    type="checkbox"
                    class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                  />
                  <label class="ml-2 text-sm text-gray-700">启用维护模式（仅管理员可访问）</label>
                </div>
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">维护消息</label>
                <textarea
                  v-model="settings.maintenanceMessage"
                  rows="3"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  placeholder="系统正在维护中，请稍后再试..."
                ></textarea>
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">日志保留天数</label>
                <input
                  v-model="settings.logRetentionDays"
                  type="number"
                  min="7"
                  max="365"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">备份频率</label>
                <select
                  v-model="settings.backupFrequency"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                  <option value="daily">每日</option>
                  <option value="weekly">每周</option>
                  <option value="monthly">每月</option>
                </select>
              </div>

              <div class="flex justify-end">
                <button
                  type="submit"
                  class="px-8 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-purple-700 transition-all duration-200 hover:scale-105 shadow-lg"
                >
                  <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                  </svg>
                  保存设置
                </button>
              </div>
            </form>
          </div>

          <!-- 安全设置 -->
          <div v-if="activeTab === 'security'" class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg p-8 animate-slide-up animation-delay-200">
            <div class="flex items-center space-x-3 mb-8">
              <div class="p-2 bg-gradient-to-r from-red-500 to-red-600 rounded-xl">
                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                </svg>
              </div>
              <h2 class="text-2xl font-bold text-gray-900">安全设置</h2>
            </div>
            
            <form class="space-y-6" @submit.prevent="saveSecuritySettings">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">密码最小长度</label>
                <input
                  v-model="settings.minPasswordLength"
                  type="number"
                  min="6"
                  max="20"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">登录失败锁定次数</label>
                <input
                  v-model="settings.maxLoginAttempts"
                  type="number"
                  min="3"
                  max="10"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">锁定时间 (分钟)</label>
                <input
                  v-model="settings.lockoutDuration"
                  type="number"
                  min="5"
                  max="60"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">会话超时时间 (小时)</label>
                <input
                  v-model="settings.sessionTimeout"
                  type="number"
                  min="1"
                  max="24"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

              <div class="flex justify-end">
                <button
                  type="submit"
                  class="px-8 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-purple-700 transition-all duration-200 hover:scale-105 shadow-lg"
                >
                  <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                  </svg>
                  保存设置
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

// 响应式数据
const activeTab = ref('basic')

const tabs = [
  { id: 'basic', name: '基本设置' },
  { id: 'user', name: '用户设置' },
  { id: 'contest', name: '竞赛设置' },
  { id: 'system', name: '系统设置' },
  { id: 'security', name: '安全设置' }
]

const settings = reactive({
  // 基本设置
  siteName: '算法学习平台',
  siteDescription: '提升编程技能，掌握算法精髓',
  siteKeywords: '算法,编程,竞赛,学习',
  adminEmail: 'admin@example.com',
  
  // 用户设置
  allowRegistration: true,
  requireEmailVerification: true,
  defaultUserRole: 'user',
  avatarSizeLimit: 2,
  
  // 竞赛设置
  defaultContestDuration: 90,
  allowContestRegistration: true,
  contestRegistrationDeadline: 24,
  autoStartContest: true,
  
  // 系统设置
  maintenanceMode: false,
  maintenanceMessage: '系统正在维护中，请稍后再试...',
  logRetentionDays: 30,
  backupFrequency: 'daily',
  
  // 安全设置
  minPasswordLength: 8,
  maxLoginAttempts: 5,
  lockoutDuration: 15,
  sessionTimeout: 8
})

// 方法
const saveBasicSettings = async () => {
  try {
    // 这里调用保存基本设置的API
    console.log('保存基本设置:', settings)
    alert('基本设置保存成功！')
  } catch (error) {
    console.error('保存基本设置失败:', error)
    alert('保存失败，请重试')
  }
}

const saveUserSettings = async () => {
  try {
    // 这里调用保存用户设置的API
    console.log('保存用户设置:', settings)
    alert('用户设置保存成功！')
  } catch (error) {
    console.error('保存用户设置失败:', error)
    alert('保存失败，请重试')
  }
}

const saveContestSettings = async () => {
  try {
    // 这里调用保存竞赛设置的API
    console.log('保存竞赛设置:', settings)
    alert('竞赛设置保存成功！')
  } catch (error) {
    console.error('保存竞赛设置失败:', error)
    alert('保存失败，请重试')
  }
}

const saveSystemSettings = async () => {
  try {
    // 这里调用保存系统设置的API
    console.log('保存系统设置:', settings)
    alert('系统设置保存成功！')
  } catch (error) {
    console.error('保存系统设置失败:', error)
    alert('保存失败，请重试')
  }
}

const saveSecuritySettings = async () => {
  try {
    // 这里调用保存安全设置的API
    console.log('保存安全设置:', settings)
    alert('安全设置保存成功！')
  } catch (error) {
    console.error('保存安全设置失败:', error)
    alert('保存失败，请重试')
  }
}

onMounted(async () => {
  try {
    // 这里加载系统设置数据
    console.log('加载系统设置')
  } catch (error) {
    console.error('加载系统设置失败:', error)
  }
})
</script>

